<template>  
    <view class="container">
		<view>
				<scroll-view   scroll-y @scrolltolower="loadData" :style="{height:screenHeight}">
				<view class="list-item" v-for="(item, index) in benifit_list" :key="index">
					<view class="list-main" @click="navTo(item.benefit_id)">
						<view style="position: relative;">
							<image class="big_image" mode="aspectFill"  :src="item.benefit_info.pics[0]"></image>
							<!-- <image mode="aspectFill" class="benefitimg" :src="item.id>10?'/static/temp/reach.png':'/static/temp/over.png'"></image> -->
						</view>
						<view class="second">
							<view class="left_1">
								<view class="left_2">
									<image class="small-image" mode="aspectFill" :src="item.benefit_info.campus_info.logo"></image>
									<text class="sq-name">{{item.benefit_info.campus_info.name}}</text>
								</view>
								<view class="benifit-name">{{item.benefit_info.title}}</view>
							</view>
							<!-- <view class="zc-coin">我已支持15020积分</view> -->
						</view>
					</view>
					
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>		
		</view>
    </view>  
</template>  
<script>  
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	
	import Api from '@/common/api';
    import { mapState } from 'vuex';  
    export default {
		components: {
			uniLoadMore
			
		},
		data(){
			return {
				page: 1,
				size: 4,
				more_data: true,
				loaded:false,
				benifit_list: [],
				loadingType: 'more',
				loaded: false,
			}
		},
		
		onLoad(options) {
			this.loadData()
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
			this.loadData()
		},
        computed: {
			...mapState(['hasLogin','userInfo']),
			screenHeight: function() {
			    return (uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.getSystemInfoSync().statusBarHeight)+'px';
			} 
		},
        methods: {
			navTo(id){
				uni.navigateTo({
					url:'/pages/benefit/detail?id='+id
				})
			},
			//获取列表
			async loadData() {
				if (!this.more_data) {
					return; //没有数据不请求
				}			
				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}
			
				this.loadingType = 'loading';
				let params = {
					page: this.page,
					size: this.size,
				};
				let data = await Api.apiCall('get', Api.apiName.user_benefit_list, params);
				if (!data) { //出错时
					this.loadingType = 'noMore'
					return;
				}
			
				setTimeout(() => {
			
					this.benifit_list = this.benifit_list.concat(data.data)
					// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;
					//判断是否还有数据， 有改为 more， 没有改为noMore
					if (data.data.length > 0 && data.data.length == this.size) {
						this.page++;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'nomore';
						this.more_data = false;
			
					}
			
				}, 600);
			},
			
        }  
    }  
</script>  
<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		flex-direction: column;
		
		.list-main{
			display: flex;
			flex-direction: column;
		}
		.big_image{
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 360rpx;
		}
		.small-image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	.second{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10rpx 20rpx;
	}
	.left_1{
		padding: 20rpx;
		flex: 1;
	}
	.left_2{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.sq-name{
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.benifit-name{
		font-size: 26rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}
	.zc-coin{
		font-size: 22rpx;
		padding: 8rpx 20rpx;
		background: #6CB15E;
		border-radius: 10rpx;
		width: 166rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.next-line{
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		color:#999999
	}
	.benefitimg{
		width: 108rpx;
		height: 108rpx;
		position: absolute;
		right: 20rpx;
	}
</style>